<template>
  <div class="login-container">
    <div class="box-item desc">
      <div class="welcome">
        <p>Welcome to the Ship Monitoring Platform</p>
        <p class="sub-welcome">
          「Safe Stable Efficient」
        </p>
      </div>
      <img class="welcome-img" src="./left-bg1.png" />
    </div>
    <div class="box-item login">
      <!-- <img class="login-qr" :src="loginQR" /> -->
      <div class="login-title">Login in to platform</div>
      <el-form
        ref="formRef"
        class="login-form"
        :model="loginForm"
        :rules="loginRules"
      >
        <el-form-item name="loginName">
          <el-input
            v-model="loginForm.loginName"
            placeholder="Enter Username"
          />
        </el-form-item>
        <el-form-item name="password">
          <el-input
            v-model="loginForm.password"
            autocomplete="on"
            :type="showPassword ? 'text' : 'password'"
            placeholder="Enter Password"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <el-form-item>
          <div class="btn" @click="handleLogin" v-loading="loading">
            Login in
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import LoginMixin from "@/page/login/index.js";
export default {
  mixins: [LoginMixin],
  data() {
    return {
      showPassword: false,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
